ビデオの再生と一時停止

コンテンツ

動画の再生はアプリ開発ではよくある作業ですが、 Flutter アプリも例外ではありません。動画を再生するには、 Flutter チームが提供するのは、video_playerプラグイン。使用できますvideo_player動画を再生するプラグインファイルシステム上、資産として、またはインターネットから保存されます。

iOS では、video_playerプラグインが利用するのはAVPlayer再生を処理します。アンドロイドでは、それは使用していますExoPlayer。

このレシピでは、video_playerストリーミングするパッケージを使用した基本的な再生および一時停止コントロールを備えたインターネットからのビデオ次の手順:

を追加します。video_player依存。
アプリに権限を追加します。
を作成して初期化するVideoPlayerController。
ビデオプレーヤーを表示します。
ビデオを再生および一時停止します。

1.`video_player`依存

このレシピは 1 つの Flutter プラグインに依存しています。video_player。まず、これを追加しますプロジェクトへの依存関係。

追加するには、video_playerパッケージを開発依存関係として実行し、flutter pub add:

$ flutter pub add video_player

2. アプリに権限を追加する

次に、アップデートしてくださいandroidとios確保するための構成アプリにビデオをストリーミングするための適切な権限があることインターネットから。

アンドロイド

次の権限をAndroidManifest.xml直後のファイル<application>意味。のAndroidManifest.xmlファイルは次の場所にあります<project root>/android/app/src/main/AndroidManifest.xml。

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application ...>

    </application>

    <uses-permission android:name="android.permission.INTERNET"/>
</manifest>

iOS

iOS の場合、以下をInfo.plistファイルは次の場所で見つかりました<project root>/ios/Runner/Info.plist。

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

3. を作成して初期化します。`VideoPlayerController`

これで、video_playerプラグインが正しくインストールされている権限、作成VideoPlayerController。のVideoPlayerControllerクラスを使用すると、さまざまなタイプのビデオと再生の制御。

ビデオを再生する前に、次のことも行う必要があります。initializeコントローラー。これにより、ビデオへの接続が確立され、再生用のコントローラー。

を作成して初期化するには、VideoPlayerController以下をせよ：

を作成しますStatefulWidget仲間と一緒にStateクラス
に変数を追加します。Stateを格納するクラスVideoPlayerController
に変数を追加します。Stateを格納するクラスFutureから戻ってきましたVideoPlayerController.initialize
でコントローラーを作成して初期化します。initState方法
コントローラーを廃棄してください。dispose方法

class VideoPlayerScreen extends StatefulWidget {
  const VideoPlayerScreen({super.key});

  @override
  State<VideoPlayerScreen> createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late VideoPlayerController _controller;
  late Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    super.initState();

    // Create and store the VideoPlayerController. The VideoPlayerController
    // offers several different constructors to play videos from assets, files,
    // or the internet.
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    );

    _initializeVideoPlayerFuture = _controller.initialize();
  }

  @override
  void dispose() {
    // Ensure disposing of the VideoPlayerController to free up resources.
    _controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // Complete the code in the next step.
    return Container();
  }
}

4.ビデオプレーヤーを表示します

では、ビデオを表示してみましょう。のvideo_playerプラグインが提供するのは、VideoPlayerによって初期化されたビデオを表示するウィジェットのVideoPlayerController。デフォルトでは、VideoPlayerウィジェットはできるだけ多くのスペースを占有します。これは多くの場合、ビデオには理想的ではありません。 16x9 や 4x3 などの特定のアスペクト比で表示されます。

したがって、VideoPlayerのウィジェットAspectRatioビデオの比率が正しいことを確認するためのウィジェット。

さらに、VideoPlayer後のウィジェット_initializeVideoPlayerFuture()完了します。使用FutureBuilderにコントローラーの初期化が完了するまで、読み込み中のスピナーを表示します。注: コントローラーを初期化しても再生は開始されません。

// Use a FutureBuilder to display a loading spinner while waiting for the
// VideoPlayerController to finish initializing.
FutureBuilder(
  future: _initializeVideoPlayerFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      // If the VideoPlayerController has finished initialization, use
      // the data it provides to limit the aspect ratio of the video.
      return AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        // Use the VideoPlayer widget to display the video.
        child: VideoPlayer(_controller),
      );
    } else {
      // If the VideoPlayerController is still initializing, show a
      // loading spinner.
      return const Center(
        child: CircularProgressIndicator(),
      );
    }
  },
)

5. ビデオの再生と一時停止

デフォルトでは、ビデオは一時停止状態で始まります。再生を開始するには、に電話するplay()によって提供されるメソッドVideoPlayerController。再生を一時停止するには、pause()方法。

この例では、追加しますFloatingActionButtonプレイを表示するアプリに状況に応じてアイコンを一時停止したり、一時停止したりできます。ユーザーがボタンをタップすると、現在一時停止中のビデオを再生します。または、ビデオが再生中の場合は一時停止します。

FloatingActionButton(
  onPressed: () {
    // Wrap the play or pause in a call to `setState`. This ensures the
    // correct icon is shown.
    setState(() {
      // If the video is playing, pause it.
      if (_controller.value.isPlaying) {
        _controller.pause();
      } else {
        // If the video is paused, play it.
        _controller.play();
      }
    });
  },
  // Display the correct icon depending on the state of the player.
  child: Icon(
    _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
  ),
)

完全な例

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

void main() => runApp(const VideoPlayerApp());

class VideoPlayerApp extends StatelessWidget {
  const VideoPlayerApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Video Player Demo',
      home: VideoPlayerScreen(),
    );
  }
}

class VideoPlayerScreen extends StatefulWidget {
  const VideoPlayerScreen({super.key});

  @override
  State<VideoPlayerScreen> createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late VideoPlayerController _controller;
  late Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    super.initState();

    // Create and store the VideoPlayerController. The VideoPlayerController
    // offers several different constructors to play videos from assets, files,
    // or the internet.
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    );

    // Initialize the controller and store the Future for later use.
    _initializeVideoPlayerFuture = _controller.initialize();

    // Use the controller to loop the video.
    _controller.setLooping(true);
  }

  @override
  void dispose() {
    // Ensure disposing of the VideoPlayerController to free up resources.
    _controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Butterfly Video'),
      ),
      // Use a FutureBuilder to display a loading spinner while waiting for the
      // VideoPlayerController to finish initializing.
      body: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // If the VideoPlayerController has finished initialization, use
            // the data it provides to limit the aspect ratio of the video.
            return AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              // Use the VideoPlayer widget to display the video.
              child: VideoPlayer(_controller),
            );
          } else {
            // If the VideoPlayerController is still initializing, show a
            // loading spinner.
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Wrap the play or pause in a call to `setState`. This ensures the
          // correct icon is shown.
          setState(() {
            // If the video is playing, pause it.
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              // If the video is paused, play it.
              _controller.play();
            }
          });
        },
        // Display the correct icon depending on the state of the player.
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}